<template>
  <div class="content">
  <el-tabs v-model="activeName2" type="card">
    <el-form label-width="">
        <el-form-item label="">
          <el-input id="name" icon="search" name="title" placeholder="请输入" style="width:200px"/>
          <el-button type="primary" style="margin-left: 14px;" @click = "curriculumList">查询</el-button>
          <el-button type="primary" style="margin-left: 14px;" @click = "ServiceManagementAdd()">新增服务商</el-button>
        </el-form-item>
        <el-table :data="curriculumListData" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="区域" prop="province.label">
          </el-table-column>
          <el-table-column align="center" label="公司" prop="company">
          </el-table-column>
          <el-table-column align="center" label="负责人" prop="displayName">
          </el-table-column>
          <el-table-column align="center" label="创建时间" prop="createdTime">
          </el-table-column>
          <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="ServiceManagementShow(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="ServiceManagementEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="ServiceLog(scope.row)">日志</el-button>
            <el-button type="text" size="small" @click="dialogVisibleTimeShow(scope.row)">续时</el-button>
            <el-button type="text" size="small"
                   @click="dialogEndShow(scope.row.oid)" v-if="scope.row.status.label ==='启用'">终止
            </el-button>
            <el-button type="text" size="small"
                   @click="dialogStartShow(scope.row.oid)" v-if="scope.row.status.label ==='终止'">启用
            </el-button>
            <el-button type="text" size="small" @click="Export(scope.row.oid)">导出激活码
            </el-button>
          </template>
        </el-table-column>
        </el-table>
      </el-form>
      <div class="page">
          <!-- <el-pagination
          background
          :page-size= "demo.materialSize"
          layout="prev, pager, next"
          :total="demo.materialTotal">
        </el-pagination> -->
          <el-pagination
            :page-size="10"
            :total="demo.materialTotal"
            background
            layout="prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
    </el-tabs>
    <el-dialog
  title="停止"
  :visible.sync="dialogEndShowBox"
  width="30%"
  :before-close="handleClose">
  <span>确定要停止？</span>
  <input type="hidden" name="" v-model="demo.oid" value="">
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogEndShowBox = false">取 消</el-button>
    <el-button type="primary" @click="dialogEndShowHide()">确 定</el-button>
  </span>
</el-dialog>
    <el-dialog
  title="启用"
  :visible.sync="dialogStartShowBox"
  width="30%"
  :before-close="handleClose">
  <span>确定要启用？</span>
  <input type="hidden" name="" v-model="demo.oid" value="">
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogStartShowBox = false">取 消</el-button>
    <el-button type="primary" @click="dialogStartHide()">确 定</el-button>
  </span>
</el-dialog>
    <el-dialog
  title="续时"
  :visible.sync="dialogVisibleTime"
  width="30%"
  :before-close="handleClose">
  <el-select v-model="demo.years" placeholder="请选择" style="width: 160px;">
    <el-option
      v-for="item in years"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <input type="hidden" name="" v-model="demo.oid" value="">
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleTime = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisibleTimeHide()">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
// import tabPane from '@/components/tabPane'
import axios from "axios";
import api from "@/api/servier";
import { Message } from "element-ui";
export default {
  data() {
    return {
      activeName2: "first",
      list: [
        {
          mm: {
            nn: "mmmmm",
            kk: "3423",
            dd: "2323"
          },
          ii: "888"
        }
      ],
      years: [
        {
          value: "1",
          label: "1个月"
        },
        {
          value: "3",
          label: "3个月"
        },
        {
          value: "6",
          label: "6个月"
        },
        {
          value: "12",
          label: "1年"
        },
        {
          value: "24",
          label: "2年"
        },
        {
          value: "36",
          label: "3年"
        }
      ],
      curriculumListData: [],
      dialogEndShowBox: false,
      dialogStartShowBox: false,
      dialogVisibleTime: false,
      materialData: [],
      demo: {
        name: ""
      },
      appsData: [],
    };
  },
  mounted() {
    this.curriculumList();
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      const data = { keyword: document.getElementById('name').value }
      api.servicePage(val - 1, '10', data).then(response => {
        console.log(response)
        this.curriculumListData = response.content;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    Export(tab) {
      window.open("/activation/export/" + tab, "_parent");
    },
    timeFormat(time) {
      var d = new Date(time);
      var times =
        d.getFullYear() +
        "-" +
        (d.getMonth() + 1) +
        "-" +
        d.getDate() +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      return times;
    },
    ServiceLog(tab) {
      this.$router.push("/ServiceManagement/ServiceLogShow?oid=" + tab.oid);
    },
    dialogEndShowHide() {
      this.dialogEndShowBox = false;
      api.serviceEnd(this.demo.oid).then(({ success, data }) => {
        alert(data);
        this.$message({
          showClose: true,
          message: "停止成功！",
          type: "success"
        });
        this.curriculumList();
      });
    },
    dialogEndShow(tab) {
      this.dialogEndShowBox = true;
      this.demo.oid = tab;
    },
    dialogStartHide() {
      this.dialogStartShowBox = false;
      api.serviceStart(this.demo.oid).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "启动成功！",
          type: "success"
        });
        this.curriculumList();
      });
    },
    dialogStartShow(tab) {
      this.dialogStartShowBox = true;
      this.demo.oid = tab;
    },
    editDo(tab) {
      console.log(tab);
    },
    dialogVisibleTimeShow(tab) {
      this.dialogVisibleTime = true;
      this.demo.oid = tab.oid;
    },
    dialogVisibleTimeHide() {
      this.dialogVisibleTime = false;
      let data = {
        oid: this.demo.oid,
        years: this.demo.years
      };
      api
        .serviceRenew(this.demo.oid, this.demo.years, data)
        .then(({ success, data }) => {
          alert(response);
          this.$message({
            showClose: true,
            message: "续时成功！",
            type: "success"
          });
          this.curriculumList();
        });
    },
    handleClose(done) {
      done();
    },
    ServiceManagementShow(tab) {
      this.$router.push(
        "/ServiceManagement/ServiceManagementShow?oid=" + tab.oid
      );
    },
    ServiceManagementEdit(tab) {
      this.$router.push(
        "/ServiceManagement/ServiceManagementEdit?oid=" + tab.oid
      );
    },
    ServiceManagementAdd() {
      this.$router.push("/ServiceManagement/ServiceManagementAdd");
    },
    curriculumList() {
      const payload = { keyword: document.getElementById('name').value }
      api.serviceList(payload).then(response => {
        this.curriculumListData = response.content;
        this.demo.materialSize = response.size
        this.demo.materialTotal = response.totalElements
        response.content.map((item, index) => {
          this.curriculumListData[index].createdTime = this.timeFormat(
            item.createdTime
          );
        });
      });
    },
    programmeAdd() {
      this.$router.push("programmeAdd");
    },
    editClick(tab, event) {
      var path =
        "appEdit?oid=" +
        tab.oid +
        "&name=" +
        tab.name +
        "&packageName=" +
        tab.packageName;
      this.$router.push(path);
    },
    appAdd() {
      this.$router.push("appAdd");
    }
  }
};
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
.content {
  margin-left: 30px;
  margin-top: 30px;
}
.page {
  margin-top: 8px;
}
</style>
